import React ,{useState,useCallback,useEffect} from "react";
import {useNavigate} from 'react-router-dom';
import {Button } from 'antd'
import request from '@/utils/request'

import moviesCss from './Will_movie.module.css' 

function PlayMovie(){
    const [page,setPage] =useState(1)
     const [datalist, setDatalist] = useState([])
     const navigate = useNavigate()
     // GET /api/movies/playlist
     useEffect(() => {
        //  无页码限制
         request.get('/movies/playlist').then(({ data }) => {
             console.log('playdatalist', data)
             setDatalist(data.data)
         })
        //  有页码限制
        // request.get('/movies/playlist',{
        //     params:{
        //         // 后端要求的参数：size,page
        //         size:10,
        //         page:page+1
        //     }
        // }).then(({data})=>{
        //     console.log('playdatalist',data)
        // })
     }, [])

     const goDatail = useCallback((id)=>{
         navigate(`/detail/${id}`)
     },[])
 
     return (
         <div>
             <>
                 <ul>
                     {
                         datalist.map(item => {
                             return  <li  key={item.filmId} className={moviesCss.list} >
                                 <div onClick={goDatail.bind(null,item.filmId)}>
                                    <img src={item.poster} className={moviesCss.poster} /> 
                                    <div className={moviesCss.content}>
                                        <h4>{item.name}</h4>
                                        <p className={moviesCss.text}>导演：{item.director}</p>
                                        <p className={moviesCss.text}>类型：{item.category}</p>    
                                        <p className={moviesCss.text}>{item.nation} | {item.runtime}分钟</p>   
                                    </div>             
                                 </div>
                                 <Button className={moviesCss.btn} >购票</Button>   
                             </li>
                         })
                     }
                 </ul>
             </>
         </div>
     )
}

export default PlayMovie